import React, { Component } from 'react';
import CommonConstants from '../../constants/CommonConstants';
import BarGraph from '../bargraph/BarGraph';
import { Scroll } from '../common-ui-parts';
import HeadLine, { HEAD_LINE_COLOR } from '../common-ui-parts/HeadLine';

/**
 * 詳細：5つの健康習慣
 */
class Detail extends Component {
  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { probability } = this.props;
    return (
      <div className="Detail">
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.DETAIL}
          customStyle={CommonConstants.SCROLL_Z}
        >
          <div className="report-card">
            <div className="card-content">
              <p className="top-content">あなたの生活習慣（喫煙・飲酒・食事（塩分）・運動習慣・BMI）を現在のまま続けた場合、今後10年の間にがんになる危険度は以下のようになります。</p>
              <HeadLine
                level={1}
                color={HEAD_LINE_COLOR.ORANGE}
              >
                あなたのがんになる危険度
              </HeadLine>
              <div className="risk-bar-graph">
                <BarGraph
                    labelSize="24px"
                    data={[
                      {
                        label: ['健康習慣を実施', 'しないグループ'],
                        value: probability.max,
                      },
                      {
                        label: 'あなた',
                        value: probability.you,
                        active: true,
                      },
                      {
                        label: ['健康習慣すべてを', '実施するグループ'],
                        value: probability.min,
                      },
                    ]}
                />
              </div>
            </div>
          </div>
        </Scroll>
      </div>
    );
  }
}

/*Detail.propTypes = {
  probability: React.PropTypes.shape({
    you: React.PropTypes.number.isRequired,
    min: React.PropTypes.number.isRequired,
    max: React.PropTypes.number.isRequired,
  }),
};*/

export default Detail
